<template>
  <div class="my_header">
    <div class="header">
      <ul>
        <li><el-icon size="20" class="no-inherit"><search /></el-icon></li>
        <li><router-link to="/Personage/Basics"><el-icon  size="20" color="#409EFC"><Setting/></el-icon></router-link></li>
        <li><router-link to="/Personage/MSG"><el-icon  size="20" color="#409EFC"><BellFilled /></el-icon></router-link></li>
        <li>
          <div><router-link to="/Personage/center">小杨1</router-link></div>
          <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right" style="padding: 0 10px;line-height: 20px;text-align: center">
              <arrow-down />
            </el-icon>
          </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>切换账号</el-dropdown-item>
                      <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import router from "../modules/router";
import {ElLoading, ElMessage} from "element-plus";
// const handleClick = () => {
//   // eslint-disable-next-line no-alert
//   alert('button click')
// }
const quit = ()=>{
  // router.push({
  //   path: '/LogIn'
  // })
  const loading = ElLoading.service({
    lock: true,
    text: '退出登录中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
      router.push({
        path: '/LogIn'
      })
      // 消息提示框
      ElMessage({
        message: '退出成功，欢迎下次光临.',
        grouping: true,
        type: 'info',
      })
  }, 1000)
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;

  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    padding: 20px 0;
    height: 20px;
    li {
      display: flex;
      align-content: center;
      cursor: pointer;

      .el-dropdown-link {
        cursor: pointer;
      }

      .el-icon-arrow-down {
        font-size: 24px;
      }
    }
  }
}
</style>
